<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<link rel="stylesheet" type="text/css" href="../c/swiper.min.css" />
	<style>
		body {
			background: #fff;
			color: #222;
		}

		.slide {
			/*background: #ddd;*/
			/*height: 20rem;*/
		}

		.title {
			font-size: 0.85rem;
			padding: 0.75rem;
			padding-top: 0;
			color: #000;
		}

		.p {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 0.75rem;
			padding-bottom: 0.5rem;
			border-bottom: 1px solid #efefef;
		}

		.p div {
			font-size: 0.65rem;
			opacity: 0.7;
			color: #555;
		}
		.money{
			padding: 0.35rem 0.75rem;
		}
		.money b {
			font-size: 1.5rem;
			color: #FE2C55;
			padding-right: 0.2rem;
		}

		.content {
			padding: 0.75rem;
			padding-top: 0;
			/*height: 100rem;*/
			margin-bottom: 2rem;
			padding-bottom: 2rem;
		}

		.content .h5 {
			font-size: 0.75rem;
			padding: 0.35rem 0;
		}

		.content .body ,.content .body p,a,b{
			font-size: 0.75rem;
			color: #222;
		}

		.content .body img {
			width: 100%;
			height: auto;
			margin: 0.25rem 0;
		}
		#sx-footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.sx-footer {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem;
		 	border-top: 1px solid #f9f9f9;
		}

		.sx-footer div {
			width: auto;
		}
		.sx-footer .img{
			font-size: 0.55rem;
			width: 3rem;
			text-align: center;
			color: #444;
		}
		.sx-footer .img img{
			width: 1rem;
			margin: 0 auto;
			text-align: center;
			opacity: 0.6;
		}
		.sx-footer .btn ,.shop .r .btn{
			background-image: -webkit-linear-gradient(left, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			background-image: -o-linear-gradient(left, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			background-image: linear-gradient(to right, rgba(241, 196, 15, 1), rgba(235, 168, 37, 1));
			text-align: center;
			color: #fff;
			font-size: 0.65rem;
			padding: 0.45rem 0;
			width: 100%;
		}
		.sx-footer .jia{
			border-top-left-radius: 1rem;
			border-bottom-left-radius: 1rem;
		}
		.sx-footer .mai{
			background-image: -webkit-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: -o-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: linear-gradient(to right, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			/*border-top-right-radius: 1rem;
			border-bottom-right-radius: 1rem;*/
		}
		.sx-footer .r{
			display: flex;
			justify-content: space-between;
			width: 78%;
		}
		.shop{
			display: flex;
			justify-content:space-between;
			padding: 0.75rem;
			align-items: center;
			border-bottom: 1px solid #efefef;
		}
		.shop .img{
			width: 2.5rem;
			height: 2.5rem;
			border-radius: 50%;
			border:1px solid #ccc;
		}
		.shop .l{
			display: flex;
			font-size: 0.75rem;
			align-items: center;
		}
		.shop .l-l{
			padding-left: 0.5rem;
		}
		.shop .l-l div.h5{
			font-size: 0.75rem;
			opacity: 1;
			padding-bottom: 0.15rem;
		}
		.shop .l-l div{
			font-size: 0.6rem;
			opacity: 0.8;
			letter-spacing: 1px;
		}
		.shop .l-l div b{
			color: #FE2C55;
		}
		.shop .r .btn{
			/*background-image: -webkit-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: -o-linear-gradient(left, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));
			background-image: linear-gradient(to right, rgba(254, 105, 105, 1), rgba(229, 28, 35, 1));*/
			color: #fff;
			width: auto;
			padding: 0.35rem 1.5rem;
			display: inline-block;
			border-radius: 2rem;
			font-size: 0.6rem;
			background: #fff;
			border:1px solid #FE2C55;
			color: #FE2C55;
		}
		#sx-header .aui-pull-left {
			width: 3rem;
		}
		#sx-header .aui-pull-left img{
			position: absolute;
			top: 0.25rem;
			left: 0.4rem;
			width: 1.8rem;
		}
		#sx-header{
			position: fixed;
			top: 0;
			left: 0;
			background-color:rgba(254, 44, 85, 0);
		}
		#sx-header .aui-title{
			opacity: 0;
		}
		.slide{
			background: #fff;
		}
		.slide img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<header class="aui-bar aui-bar-nav" id="sx-header">
		<a class="aui-pull-left aui-btn" tapmode onclick="_close()">
			<img src="../i/right-bais.png"/>
		</a>
		<div class="aui-title"></div>
	</header>
	<script id="sx-list" type="text/x-dot-template">
		<div class="swiper-container slide" style="height:{{= w}}px">
			<div class="swiper-wrapper">
				{{ for(var i=0;i < s_data.view.img_list.length; i++) { }}
				<div class="swiper-slide"><img src="{{= _img(s_data.view.img_list[i],api.winWidth+200,api.winWidth+200)}}" ></div>
				{{ } }}
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div class="aui-content">
			<div class="money">
				<b>{{= s_data.view.money}}</b>元
			</div>
			<div class="title">
				{{= s_data.view.title}}
			</div>
			<div class="p">
				<div>存库{{= s_data.view.num}}</div>
				<div>已售{{= s_data.view.num_s}}</div>
				<div>包邮</div>
				<div>7天无理由退款</div>
			</div>
			<div class="shop">
				<div class="l">
					<img src="{{= _img(s_data.info.img,60) }}" class="img">
					<div class="l-l">
						<div class="h5">{{= s_data.info.title}}</div>
						<div class="p1">全部商品<b>{{= s_data.info.num}}</b>件</div>
					</div>
				</div>
				<div class="r" tapmode onclick="_url({uid:{{= s_data.info.uid}}},'shop_shop_win')">
					<div class="btn">进店逛逛</div>
				</div>
			</div>
			<div class="content">
				<div class="h5">商品详细</div>
				<div class="body">{{= s_data.view.content}}</div>
			</div>
		</div>
		<div id="sx-footer">
			<div class="sx-footer">
				<div class="img" tapmode onclick=" return api.call({number: '{{= s_data.info.mobile}}'}); ">咨询</div>
				<div class="r">
					<!--<div class="btn jia" tapmode onclick="catr()">加入购物车</div>-->
					<div class="btn mai" tapmode onclick="pay()">立即购买</div>
				</div>
			</div>
		</div>
	</script>
	<div id="sx-view"><div id="jiazai" style=" padding-top:50%; "><img src="../i/loading_more.gif" /></div></div>
</body>
<script type="text/javascript" src="../j/swiper.min.js"></script>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var s_data,w,header_h=0,webBrowser
	apiready = function() {
		header = $api.byId('sx-header');
		$api.fixStatusBar(header);
		header_h = $api.offset(header).h;
		w = api.winWidth
		console.log(JSON.stringify(api.pageParam))
		if(!api.pageParam['id'] && !api.pageParam['vid']){
			return _alert('商品不存在或已下架',function(ret,err){
				_close();
			});
		}
		data();
	}
	function data(){
		_ajax('shop/view',function(ret,err){
			// console.log(JSON.stringify(ret))
			if(ret){
				s_data = ret;
				// console.log(ret.view.url);
				$('.aui-title').text(ret.info.title)
				if(ret.view.url){
					return wurl();
				}
				//渲染模版
				var evalData = doT.template($api.html($api.byId('sx-list')));
				$api.html($api.byId( 'sx-view'), evalData(ret));
				api.parseTapmode();
				$api.fixTabBar($api.dom('#sx-footer'))

				var swiper = new Swiper('.swiper-container', {
		      pagination: {
		        el: '.swiper-pagination',
		        dynamicBullets: true,
		      },
		    });
				$(window).on('scroll', function() {
					var sTop = $(window).scrollTop();
					var a = ((sTop-header_h-((w-header_h)/3)))/(w-header_h)*2;
				 	if(sTop > (w-header_h)){
					}else{
						// console.log(a)
					}
					$('#sx-header').css('background-color','rgba(254, 44, 85, '+a+')');
					// $('#sx-header img.l').css('opacity',a);
					$('#sx-header .aui-title').css('opacity',a);
				});
			}else{
				_alert('商品不存在或已下架',function(ret,err){
					_close();
				});
			}
		},{id:api.pageParam['id']})
	}
	function catr(id){
		_msg('已加入购物车');
	}
	function pay(){
		console.log(JSON.stringify(s_data))
		if(!s_data.view.num){
			return _msg('当前商品库存为'+s_data.view.num+'件库存，请联系商家协商')
		}
		_url({id:s_data.view.id,animation:true},'shop_pay')
	}
	function wurl(){
		$('#sx-header').css('background-color','rgba(254, 44, 85, 1)');
		webBrowser = api.require('webBrowser');
		webBrowser.openView({
			url : s_data.view.url,
			rect : {
				x : 0,
				y : header_h,
				w : 'auto',
				h : 'auto'
			}
		}, function(ret, err) {

		});
	}
</script>
</html>
